<script setup>
  defineProps({
    listData: {
      type: Array,
      default: () => []
    }
  })
</script>

<template>
  <div class="lv-list-view">
    <!-- 操作区域 -->
    <div class="opera">
      <slot name="btns" />
    </div>
    <!-- 列表区域 -->
    <div class="list">
      <div class="item" v-for="(item, index) in listData" :key="index">
        <!-- 左侧内容插槽 -->
        <div class="left"><slot name="left" :row="item" :index="index" /></div>
        <!-- 右侧操作插槽 -->
        <div class="right"><slot name="right" :row="item" :index="index" /></div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .lv-list-view {
    .opera {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 20px;
    }
    .list {
      .item {
        display: flex;
        align-items: center;
        padding: 20px 0;
        .left {
          flex: 1;
          display: flex;
          align-items: center;
        }
        .right {
          width: 20%;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
      }
    }
  }
</style>
